 * {
   margin: 0;
   padding: 0
 }

 html,
 body {
   width: 100%;
   height: 100%;
 }

 ul {
   list-style: none;
   width: 840px;
   height: 600px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow: hidden;
 }

 li {
   float: left;
   width: 168px;
   transition: 1s;
   cursor: pointer;
 }

 img {
   vertical-align: top;
   width: 640px;
   height: 600px;
 }

 ul:hover li {
   width: 50px;
 }

 /*这个跟上面的位置不能调转，因为优先级一样。*/
 ul li:hover {
   width: 640px;
 }